<template>
  <div class="property">
    <section>
      <el-input placeholder="Los Angeles, CA" width="300px" v-model="keywords" 
        @keydown.native.enter="getHouseList()" suffix-icon="el-icon-search1" clearable></el-input>
      <i class="el-icon-search" @click="getHouseList()"></i>
      <el-autocomplete class="inline-input" v-model="queryParams.min" :fetch-suggestions="querySearch" 
        placeholder="$ No Min" @select="handleSelect" clearable></el-autocomplete>
      <el-autocomplete class="inline-input" v-model="queryParams.max" :fetch-suggestions="querySearch" 
        placeholder="$ No Max" @select="handleSelect" clearable></el-autocomplete>
      <!-- <el-autocomplete class="inline-input" v-model="state3" :fetch-suggestions="querySearch" 
      placeholder="Property Type" @select="handleSelect"></el-autocomplete>
      <el-autocomplete class="inline-input" v-model="state4" :fetch-suggestions="querySearch" 
      placeholder="Beds & Baths" @select="handleSelect"></el-autocomplete> -->
      <el-select v-model="queryParams.property_type" multiple collapse-tags placeholder="Property Type">
        <el-option v-for="item in properTypes" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.bed" multiple collapse-tags placeholder="Beds & Baths">
        <el-option-group v-for="group in babes" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
      <!-- <a @click="filterType('propertyType')" :class="{'active': filterObj.propertyType}" href="javascript:;">Property Type</a> -->
      <!-- <a @click="filterType('bedsBaths')" :class="{'active': filterObj.bedsBaths}" href="javascript:;">Beds & Baths</a> -->
      <!-- <a @click="filterType('capRate')" :class="{'active': filterObj.capRate}" href="javascript:;">Cap Rate</a>
      <a @click="filterType('tokenPrice')" :class="{'active': filterObj.tokenPrice}" href="javascript:;">Token Price</a> -->
    </section>
    <div class="content">
      <div id="googleMap" class="map">
      </div>
      <div class="house-list">
        <div class="title">
          <div>{{this.searchInput || 'No matching results'}}</div>
          <p>{{count}} listings available on FrontRock</p>
        </div>
        <div v-for="item in housingList" :key="item.id" class="house" @click="gotoDetails(item)">
          <div class="img" :style="`background-image:url(${item.images.image})`"></div>
          <div class="info">
            <div class="t">
              <div>{{ houseAddressFormat(item.house_addr).street || 'Selway,Apartments.mock'}}</div>
              <!-- <p>390 Cliff Dr, Pasadena, CA 91107</p> -->
              <p>{{item.house_addr | addrFormat}}</p>
            </div>
            <!-- <div class="price">$1,200,000</div> -->
            <div class="price">${{item.total_price | numberFormat}}</div>
            <div class="type">{{item.sale_type || 'Multi-family • Apartment'}}</div>
            <div class="cap-rate">Cap Rate: {{item.capRate || (Math.random()*100).toFixed(2)}}%</div>
          </div>
          <div class="under">
            <div class="frk">{{item.frk || Math.random()*1e6>>0 | numberFormat}}FRK/CA1</div>
            <div class="r">
              <span class="chg">+{{item.chg || Math.random().toFixed(2)}}</span>
              <span class="vol">{{item.vol || Math.random()*1e4>>0}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//   import tokensCard from './tokensCard'
// import { registry } from "@/api/login"
import { houseListing } from "@/api/listing"
import { initMap } from "@/api/google_map"

export default {
  name: "property",
  data() {
    return {
      keywords: '',
      searchInput: '',
      busRoute: Bus.route.keywords || '',
      count: 0,
      housingList: [],
      propertys: [],
      // state1: '',
      // state2: '',
      // state3: '',
      // state4: '',
      queryParams: {
        search: '',
        // house_addr: this.keywords,
        sale_type: 'for_sale',
        min: '',
        max: '',
        property_type: '',
        page: 1,
        page_num: 10,
        bed: '',
        bath: ''
      },
      // Array.from({length: 20}, (v, i) => i).flatMap(m=>new Object({key: 1, value: ''}))
      minMax: Array(38).fill(0).map((m,i) => {
        let n = (i+1)*50, mi
        if(n < 1000) { 
        } else {
          mi = (i+1) * 0.5
        }
        let money = `$${n < 1000 ? n + 'k': (i-17) * 0.5 + 'M'}`
        return new Object({
          key: i+1,
          value: money
        })
      }),
      properTypes: [{
          value: 'House',
          label: 'House'
        }, {
          value: 'Townhome',
          label: 'Townhome'
        }, {
          value: 'Multi-family',
          label: 'Multi-family'
        }, {
          value: 'Condo',
          label: 'Condo'
        }
        ,{
          value: 'Land',
          label: 'Land'
        }
        ,{
          value: 'Manufactured',
          label: 'Manufactured'
        }
        ,{
          value: 'Co-op',
          label: 'Co-op'
        }
        ,{
          value: 'Other',
          label: 'Other'
        }],
      babes: [{
          label: 'Bedrooms',
          options: [{
            value: 'Studio',
            label: 'Studio'
          }, {
            value: '11',
            label: '1'
          }, {
            value: '12',
            label: '2   3   4+'
          }]
        }, {
          label: 'Bathrooms',
          options: [{
            value: '2001',
            label: '1'
          }, {
            value: '2002',
            label: '2'
          }, {
            value: '2003',
            label: '3'
          }, {
            value: '2004',
            label: '4+'
          }]
        }],
      timeout: null,
      filterObj: {
        propertyType: false,
        bedsBaths: false,
        totalPrice: false,
        capRate: false,
        tokenPrice: false
      },
      /** housingList: Array(1 + (Math.random()*10|0)).fill({
        "id": "866",
        "total_price": 14277871,
        "house_addr": "Rhnnl Ijo Fie Gscbicwsm Yaajxpi Gmfyx",
        "images": {
          "filename": "pilbgxcfcm",
          "image": "http://dummyimage.com/120x90",
          "file_type": "hhawru",
          "fastdfs_image": "http://dummyimage.com/120x240"
        }
      }) */
    }
  },
  watch: {
    /*state1(newKey, oldKey) {
      console.log('watch:', newKey, oldKey)
      this.getHouseList()
    }*/
  },
components: {
    //   tokensCard
  },
  filters: {
    addrFormat(address) {
      return address.replace(/,/g, ' ')
    },
    numberFormat(num) {
      let arr = [], snum = (num + '').split('').reverse()
      for(let i=0; i<snum.length; i++) {
        arr.unshift(snum[i])
        if(i%3 === 2) arr.unshift(',')
      }
      // console.log(num, arr.join(''))
      return arr.join('').replace(/^,|,$/, '')
    }
  },
  mounted() {
    console.log("property:", this)
    this.keywords = this.searchInput = Bus.route.keywords || ''
    this.getHouseList()
    initMap('googleMap', [33.9336095,-118.2668918])
    // google.maps.event.addDomListener(window, 'load', initialize('googleMap'))
  },
  methods: {
    getHouseList() {
      if(!this.keywords.trim()) return
      this.searchInput = this.keywords
      // {
      //   search: this.keywords,
      //   sale_type: 'for_sale',
      //   min: 50,
      //   max: 1000,
      //   property_type: ['House', 'Townhome', 'Multi-family'],
      //   page: 1,
      //   page_num: 10,
      //   bed: 1,
      //   bath: 1
      // }
      this.queryParams.search = this.keywords
      console.warn('queryParams:', this.queryParams)
      houseListing(this.queryParams)
      .then(data => {
        console.log(new Date(), data, this)
        this.housingList = data.results
        this.count = data.count
        /* if (response.code !== 200) {
          this.$message.error((response && response.msg) || "service error!")
          return
        }
        this.$alert("success", {
          center: true
          // this.$message.success("success！")
        }).then(res => console.log(res)) */
      })
      .catch(err => {
        console.log(err)
        this.$message.error((err && err.msg) || "catch system error!")
      })
    },
    houseAddressFormat(address) {
      const addrArray = address.split(',')
      return {
        addrArray,
        street: addrArray[0],
        district: addrArray[1],
        zipCode: addrArray[2]
      }
    },
    filterType(type) {
      // this[type] = !type
      this.filterObj[type] = !this.filterObj[type]
    },
    routePath(i) {
      Bus.$emit('topbar', i)
    },
    gotoDetails(item) {
      console.log(item)
      window.open(`./#/propertyDetail?id=${item.id}`)
    },
    querySearch(queryString, cb) {
        let minMax = this.minMax
        let results = queryString ? minMax.filter(this.createFilter(queryString)) : minMax
        // 调用 callback 返回建议列表的数据
        cb(minMax)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(item) {
        console.log(item)
      }
  },
};
</script>


<style lang="scss">
.property {
  position: relative;
  text-align: center;
  color: #070f4e;
  border-top: 2px solid #efece6;
  margin: 15px 0 0 0;
  section{
    display: flex;
    align-items: center;
    padding: 20px 30px;
    font-family: "Krona One", monospace;
    color: #070F4E;
    .el-input{
      width:auto;
      input{
        height: 48px;
        width: 300px;
        margin:0 30px 0 0;
        color:#070F4E;
        border-radius: 50px;
        border: none;
        background:rgba(7, 15, 78, 0.05);
        padding: 0 40px 0 20px;
        font-size: 12px;
        font-family: "Krona One", monospace;
        outline:none;
        &::placeholder{
          color:#070F4E;
        }
      }
    }
    .el-icon-search{
      margin:0 60px 0 -65px;
      font-weight: bolder;
      cursor: pointer;
      z-index: 999;
      &:hover{
        color: #6271f1;
        filter: brightness(1.1);
      }
    }
    .el-autocomplete{
      input{
        cursor: pointer;
        width: 148px;
        height:40px;
        text-align: center;
        &:hover{
          background: rgba(37, 39, 54, 0.1);
        }
      }
    }
    .el-select{
      cursor: pointer;
      input{
        width:auto;
        height:40px;
        text-align: center;
        &:hover{
          background: rgba(37, 39, 54, 0.1);
        }
      }
      .el-select__tags{
        left:10px;
        .el-tag.el-tag--info{
          border:none;
          background: transparent;
          color:#070F4E;
        }
      }
    }
    a{
      text-decoration: none;
      color:#070F4E;
      display: inline-block;
      margin: 0 10px;
      padding: 16px 25px;
      border-radius: 50px;
      font-size: 12px;
      background:rgba(7, 15, 78, 0.05);
      &:hover{
        // background:rgba(7, 15, 78, 0.1);
        background: rgba(37, 39, 54, 0.1);
      }
      &.active{
        background: #070F4E;
        color: #fff;
      }
    }
  }

  .content{
    background: #fff;
    display: flex;
    .map{
      width: 50%;
      height: 800px;
      background: url(../assets/map_demo.jpeg) no-repeat;
      background-size: 100% auto;
    }
    .house-list{
      width: 50%;
      color:#070F4E;
      font-family: Newsreader, serif;
      text-align: left;
      overflow: auto;
      max-height: 800px;
      .title{
        padding: 50px 0 0 30px;
        div{
          font-size: 24px;
          font-weight: bolder;
        }
        p{
          font-size: 18px;
          margin: 10px 0;
        }
      }

      .house{
        cursor:pointer;
        margin: 30px 40px;
        display: flex;
        align-items: center;
        background: #F6F5F5;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        padding: 0 0 52px 0;
        .img{
          width: 47%;
          height: 180px;
          background: url(../assets/listing_house_list.jpeg) no-repeat;
          background-size: 100% auto;
          border-top-left-radius: 20px;
        }
        .info{
          font-family: "Krona One", monospace;
          font-size: 12px;
          margin:0 0 0 25px;
          .t{
            font-family: Newsreader, serif;
            font-size: 18px;
            div{
              font-weight: bolder;
            }
            p{
              font-size: 15px;
              margin: 5px 0 20px 0;
              width: 97%;
              max-width: 314px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
          .price{
            font-size: 22px;
            margin: 0 0 15px 0;
          }
          .type{
            // font-size: 12px;
          }
          .cap-rate{}
        }
        .under{
          font-family: "Krona One", monospace;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #fff;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          background: #0A0F39;
          padding: 16px 25px;
          .frk{
            font-size: 16px;
            display: flex;
            align-items: center;
            &:before{
              content: '';
              width: 30px;
              height: 30px;
              background:url(../assets/land2_room.png) no-repeat;
              background-size: 100% auto;
              background-size: 100% auto;
              background-position: center center;
              display: inline-block;
              margin: 0 10px 0 0;
            }
          }
          .r{
            font-size: 14px;
            span{
              margin: 0 10px;
              &::before{
                margin:0 5px;
              }
            }
            .chg{
              &:before{
                content: 'CHG';
                color: rgba(246, 245, 245, .6);
              }
              color:#3BCEAB;
            }
            .vol{
              &:before{
                content: 'VOL';
                color: rgba(246, 245, 245, .6);
              }
            }
          }
        }
      }
    }
  }
}

.el-autocomplete-suggestion, .el-select-dropdown{
  // box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 20%);
  // box-shadow: 10px 10px 10px 0 rgba(0,0,0, .2);
  background: #eaeaed;
  border-radius:14px;
  border:none;
  ul.el-scrollbar__view{
    // background: #F6F5F5;
    li{
      color:#0A0F39;
      font-family: "Krona One", monospace;
      padding:0 20px 0 42px;
      &:hover{
        background: transparent;
        text-decoration: underline;
      }
      &.selected{
        &:after{
          font-size: 14px;
          background: #6271F1;
          width: 15px;
          height: 15px;
          left: 20px;
          top: 10px;
          color: #fff;
          text-align: center;
          line-height: 15px;
        }
      }
      span{
        &:hover{
          // text-decoration: underline;
        }
      }
    }
    .el-select-group__wrap{
      &:hover{
        text-decoration: none;
      }
      .el-select-group__title{
        color:#0A0F39;
        font-family: "Krona One", monospace;
        &:hover{
          text-decoration: none;
        }
      }
      li{
        padding: 0 10px 0 20px;
        &:hover{
          text-decoration: none;
        }
        ul.el-select-group{
          padding:0 20px 10px 0px;
          display: flex;
          justify-content: left;
          &:hover{
            text-decoration: none;
          }
          .el-select-dropdown__item{
            padding: 0 12px;
            margin: 0 15px 0 0px;
            border-radius: 50px;
            background: #fff;
            font-size: 12px;
            &:hover{
              text-decoration: none;
            }
            &.selected{
              &:hover{
                text-decoration: none;
              }
              background:#6271f1 !important;
              color:#fff;
              &:after{
                display: none;
              }
            }
            span{
              &:hover{
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
  .popper__arrow{
    &:after{
      border-bottom-color: #eaeaed !important;
    }
  }
  .el-select-dropdown__item{
    &.hover{
      background: transparent;
      text-decoration: underline;
    }
    &.selected{
      background: transparent !important;
    }
  }
}

@media only screen and (min-width: 1680px) {
  .order {
    font-size: 16px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r {
      font-size: 45px;
      em {
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1570px) and (max-width: 1680px) {
  .order {
    font-size: 16px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r {
      font-size: 45px;
      em {
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1440px) and (max-width: 1570px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 3%;
    top: 36%;
    .r {
      font-size: 38px;
      em {
        font-size: 15px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 21px;
    }
  }
}
@media only screen and (max-width: 1440px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 40%;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
  }
}
@media only screen and (max-width: 720px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color: white;
    position: absolute;
    right: 2%;
    top: 0;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 16px;
      margin-left: 1px;
    }
  }
}
@media only screen and (max-width: 420px) {
  .order {
    top: 4px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 24px;
    }
    .btn {
      padding: 0.18em 0.6em 0.19em;
      font-size: 15px;
    }
  }
}
@media only screen and (max-width: 375px) {
  .order {
    top: 0px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
@media only screen and (max-width: 360px) {
  .order {
    top: -1px;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
</style>

